<template>
	<div class="fail-req-count-detail-container">
		<!-- 搜索条件 -->
		<el-form :model="formData" :inline="true" :label-width="100">
			<el-form-item label="业务系统" prop="alarmContext">
				<el-input v-model="formData.alarmContext" placeholder="输入错误信息模糊搜索"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
				<el-button style="margin-left: 15px" type="primary" icon="Download" @click="downloadHandler">下载</el-button>
			</el-form-item>
		</el-form>
		<div class="yd-tabs">
			<div class="yd-tab" :class="{ active: formData.retCodeTypeId == 4 }" @click="currentTab = 4">自定义返回码</div>
			<div class="yd-tab" :class="{ active: formData.retCodeTypeId === 3 }" @click="currentTab = 3">系统返回码</div>
		</div>
		<div class="yd-codes">
			<span class="yd-codes" v-for="code in renderCodeList" :key="code">{{ code }}</span>
		</div>

		<!-- 失败请求量详情列表 -->
		<YdCard>
			<YdTable
				:formData="formData"
				:tableConfig="tableConfig"
				:tableData="tableData.data"
				@sizeChangeHandler="searchHandler"
				@currentChangeHandler="searchHandler"
				@sortChangeHandler="searchHandler"
			></YdTable>
		</YdCard>
	</div>
</template>

<script setup name="FailReqCountDetail" lang="ts">
import { ref, reactive, onMounted, onBeforeMount, getCurrentInstance, computed } from 'vue';
import { useRoute } from 'vue-router';
import { queryFailReqListPage, downloadFailReqList, queryRetStatisInfo } from '@/api/bpm/segment/segment_overview';
// import YdCard from '@/components/YdCard/index';
import { downloadFromBlob } from '@/utils/common';

const instance = getCurrentInstance();
const proxy = instance?.proxy;

const route = useRoute();
// 当前tab
const currentTab = ref(0);

// 搜索表单数据
const formData = reactive<FormModelType>({
	...route.query,
	// 默认查询自定义返回码
	retCodeTypeId: 4, //3系统 4自定义
	// startTime:'2023-01-04 00:00:00',
	// endTime:'2023-01-05 00:00:00',
	alarmContext: '',
});
// 列表配置
const tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '开始时间',
			prop: 'alarmTriggerTime',
			width: 160,
			sortable: true,
		},
		/*{
                label: '时长',
                prop: 'dealTime',
                width: 200,
                sortable: true
              },*/
		{
			label: '错误信息',
			prop: 'alarmContext',
			align: 'left',
		},
		{
			label: '请求URL',
			prop: 'alarmObject',
		},
	],
	pagination: {
		pageNum: 1,
		pageSize: 10,
		orderByColumn: 'alarmTriggerTime',
		isAsc: 'desc',
	},
	loading: true,
});
// 列表数据
const tableData = reactive({
	data: [],
});
// 下载状态
const downloading = ref(false);
// 自定义返回码
const customCodeList = ref([]);
//  系统返回码
const systemCodeList = ref([]);

onBeforeMount(() => {
	queryCode();
});

onMounted(() => {
	searchHandler();
});

const renderCodeList = computed(() => {
	return formData.retCodeTypeId === 4 ? customCodeList : systemCodeList;
});
// 查询返回码
function queryCode() {
	let params = {
		systemId: formData.systemId || 1,
		segmentId: formData.segmentId || 4,
		retCodeTypeId: formData.retCodeTypeId,
		startTime: formData.startTime,
		endTime: formData.endTime,
	};
	queryRetStatisInfo(params).then((res) => {
		if (res.code === 0) {
			console.log('res----', res);
		}
	});
}
// 查询
function searchHandler() {
	// if (btnFlag) {
	// 	// 重置页数
	// 	formData.pageNum = 1;
	// }
	tableConfig.loading = true;
	queryFailReqListPage(formData).then((res: ApiResponse) => {
		if (res.code !== 200) {
			return;
		}
		tableConfig.loading = false;
		tableData.data = res.data.data;
		tableConfig.pagination!.total = res.data.total;
	});
}
// 下载
function downloadHandler() {
	const d = JSON.parse(JSON.stringify(formData));
	d.pageNum = undefined;
	d.pageSize = undefined;
	downloading.value = true;
	downloadFailReqList(d).then((res: ApiResponse) => {
		downloading.value = false;
		downloadFromBlob(res, '失败请求量详情列表').then((o: any) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
}
</script>

<style rel="stylesheet/scss" lang="scss">
.fail-req-count-detail-container {
	margin: 10px;

	.el-card__body {
		padding: 15px 20px 35px 20px;
	}
}
</style>
<style scoped lang="scss">
.yd-tabs {
	display: flex;
	border-radius: 8px;
	width: auto;
}
.yd-tab {
	height: 30px;
	border: 2px solid#2beded;
	color: #2beded;
	box-sizing: border-box;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.yd-tab.active {
	color: #333;
	background: #2beded;
}
</style>
